<template>
    <transition name="slide">
        <div class="modal" v-show="showModal">
            <div class="mask"></div>
            <div class="modal-dialog">
                <div class="modal-header">
                    <span>{{title}}</span>
                    <a href="javascript:;" class="icon-close"  @click="$emit('cancel')"></a>
                </div>
                <div class="modal-body">
                    <slot name="body">

                    </slot>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" v-if="btnType==1" @click="$emit('submit')" class="btn">{{sureText}}</a>
                    <a href="javascript:;" v-if="btnType==2" class="btn" @click="$emit('cancel')">{{cancelText}}</a>
                    <div class="btn-group" v-if="btnType==3">
                        <a href="javascript:;" @click="$emit('submit')" class="btn">{{sureText}}</a>
                        <a href="javascript:;" class="btn" @click="$emit('cancel')">{{cancelText}}</a>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "Modal",
        props:{
            // 弹框类型，小框small，中框middle，大框large, 表单form
            modalType:{
                type: String,
                default: 'form'
            },
            //弹框标题
            title:{
                type: String
            },
            //按钮类型 1确定按钮； 2取消按钮 3 确定取消
            btnType:{
                type: String
            },
            sureText:{
                type: String,
                default: '确定'
            },
            cancelText:{
                type: String,
                default: '取消'
            },
            showModal:{
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style scoped>

</style>